<!--
 * @Author: xuhy 1727317079@qq.com
 * @Date: 2022-09-04 09:48:48
 * @LastEditors: xuhy 1727317079@qq.com
 * @LastEditTime: 2022-09-04 17:20:19
 * @FilePath: \vue3_test\src\App.vue
 * @Description: 父组件
-->
<template>
  <h2>我是App组件</h2>
  <h2>姓名: {{ name }}</h2>
  <h2>年龄: {{ age }}</h2>
  <h2>性别: {{ sex }}</h2>
  <h2>a的值是: {{a}}</h2>
  <button @click="sayWelcome">说话(Vue2所配置的-sayWelcome)</button>
  <br /><br />
  <button @click="sayHello">说话(Vue3所配置的-sayHello)</button>
  <br /><br />
  <button @click="test1">测试一下在Vue2的配置中读取Vue3中的数据和方法</button>
  <br /><br />
  <button @click="test2">
    测试一下在Vue3的setup配置中读取Vue2中的数据和方法
  </button>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      sex: "男",
      a: 100,
    };
  },
  methods: {
    sayWelcome() {
      alert("欢迎来到这里!");
    },
    test1() {
      console.log(this.sex);
      console.log(this.name);
      console.log(this.age);
      this.sayHello();
    },
  },
  // 此处只是测试一下setup, 暂时不考虑响应式的问题
  setup() {
    // 数据
    let name = "张三";
    let age = 18;
    let a = 200

    // 方法
    function sayHello() {
      alert(`我叫${name}, 我${age}岁了, 你好啊!`);
    }
    function test2() {
      console.log(name);
      console.log(age);
      console.log(sayHello);
      console.log(this.sex);
      console.log(this.sayWelcome);
    }
    // 返回一个对象(常用)
    return {
      name,
      age,
      // eslint-disable-next-line
      a,
      sayHello,
      test2,
    };
    // 返回一个函数(渲染函数)
    // return () => h("h2", "尚硅谷");
  },
};
</script>
